<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<title>账单</title>
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		<script>
		var projectName ="${pageContext.request.contextPath}";
		var vendorIds = "${vendorIds}";
		</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bill.js"></script>
	<style>
		.pagination.square {
			margin: 0; /* 去除外边距*/
			}
			
			.pagination.square > li > a,
			.pagination.square > li > span {
				margin: 0 5px;
				border: 1px solid #dddddd; /* 设置所有的边框都为1像素*/
			}
			.pagination.square > li:first-child > a,
			.pagination.square > li:first-child > span,
			.pagination.square > li:last-child > a,
			.pagination.square > li:last-child > span {
				margin-left: 0px;
				padding-left: 10px;
				padding-right: 10px;
				border-radius: 0px; /* 取消圆角*/
			}
		.abc tr{
			height: 26px;
		}
		.next-page,.pre-page{
			color:#337ab7;
		    border: 1px solid #dddddd;
		    float: left;
		    padding: 0px 10px;
		    height:34px;
		    line-height:34px;
			margin:0 10px  0px 5px;
		}
		.next-page:hover,.pre-page:hover{
			cursor:pointer;
			background-color: #eee;
		    color: #23527c;
		}
		.first-page,.finally-page{
			color:#337ab7;
		    border: 1px solid #dddddd;
		    float: left;
		    padding: 0px 10px;
		    height:34px;
		    line-height:34px;
			margin:0 10px  0px 5px;
		}
		.first-page:hover,.finally-page:hover{
			cursor:pointer;
			background-color: #eee;
		    color: #23527c;
		}
	</style>
	</head>
	<body>
	<!-- Modal1 新增 -->
		<div class="modal fade" id="newPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Add Department Item</h4>
		      </div>
		      <div class="modal-body">
		    	<form class="form-horizontal">
		    		<table id="Zhangdan" class="table table-bordered table-hover">
						<thead>
							<tr class="zhangdan">
								<td class="col-sm-4 control-label" style="text-align:left">部门</td>
								<td class="col-sm-4 control-label" style="text-align:left">Amount</td>
								<td class="col-sm-4 control-label" style="text-align:left"><input type="checkbox" />Confirm</td>
							</tr>
						</thead>
						<c:forEach items="${datas1['department']}" var="department">
							<tbody class="abc">
								<tr>
									<td>${department.departmentName}</td>
									<td><input type="text" class="form-control input-amount" id="amount"></td>
									<td class="text-center"><input type="checkbox" class="choice-checkbox" /></td>
								</tr>
							</tbody>
						</c:forEach>
					</table>
					<div class="form-group">
		    			<div class="col-sm-6">
		    				<select class="btn btn-default dropdown-toggle" id="VendorSpinner1">
		    				
		    				</select>
		    			</div>
		    			<label for="inputPassword3" class="col-sm-2 control-label">总额</label>
		    			<div class="col-sm-4"><input type="Total" class="form-control" id="Total">
		    			</div>
		    		</div>
		    		<div class="form-group">
		    			<label for="inputPassword3" class="col-sm-2 control-label">Bill Date</label>
		    			<div class="col-sm-4"><input type="Date" class="form-control" id="Date">
		    			</div>
		    			<label for="inputPassword3" class="col-sm-2 control-label">Bill Due Date</label>
		    			<div class="col-sm-4"><input type="Date" class="form-control" id="DueDate">
		    			</div>
		    		</div>
		    	</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-success" id="addNewBill">添加</button>
		        <button type="button" class="btn btn-warning" id="btnReset">Reset</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- Modal2 新增 -->
		<div class="modal fade" id="newPopUp2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Add Vendor</h4>
		      </div>
		      <div class="modal-body">
		    	<form class="form-horizontal">
		    		<div class="form-group">
		    			<label for="inputEmail3" class="col-sm-4 control-label">Vendor Name</label>
		    			<div class="col-sm-8"><input type="Name" class="form-control" id="Name2">
		    			</div>
		    		</div>
		    		<div class="form-group">
		    			<label for="inputPassword3" class="col-sm-4 control-label">Vendor Address</label>
		    			<div class="col-sm-8"><input type="Address" class="form-control" id="Address2">
		    			</div>
		    		</div>
		    		<div class="form-group">
						<label for="inputPassword3" class="col-sm-4 control-label">Vendor Phone</label>
						<div class="col-sm-8"><input type="Phone" class="form-control" id="Phone2">
						</div>
		    		</div>
		    		<div class="form-group">
		    			<label for="inputPassword3" class="col-sm-4 control-label">Vendor FAX</label>
		    			<div class="col-sm-8">
		    				<input type="FAX" class="form-control" id="FAX2">
		    			</div>
		    		</div>
		    		<div class="form-group">
		    			<label for="inputPassword3" class="col-sm-4 control-label">Contact Person</label>
		    			<div class="col-sm-8">
		    				<input type="Contact" class="form-control" id="Contact2">
		    			</div>
		    		</div>
		    	</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-success" id="addbtnCreate">添加</button>
		        <button type="button" class="btn btn-warning" id="VendorbtnReset">Reset</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<h2 style="text-align: center;">账单管理</h2>
		<div class="panel panel-default">
			<div class="panel-heading clearfix">
				<div class="pull-left">
					<a type="button" class="btn btn-default" href="${pageContext.request.contextPath}/zal.do?method=1">返回</a>
					<button class="btn btn-success" data-toggle="modal" data-target="#newPopUp" data-backdrop="static" id="addbill">Add Department Item</button>
					<select class="btn btn-default dropdown-toggle" id="VendorSpinner"></select>
				</div>
				<div class="pull-right">
					<button class="btn btn-success" data-toggle="modal" data-target="#newPopUp2" data-backdrop="static" id="addVendor">Add Vendor</button>
				</div>
			</div>
			
			<input type="hidden" name="addressId" id="addressId" value="0"/>
		<table id="List" class="table table-bordered table-hover">
			<thead>
				<tr class="shouru">
					<td class="col-sm-2 control-label">供货商</td>
					<td class="col-sm-2 control-label">账单日期</td>
					<td class="col-sm-2 control-label">账单过期日期</td>
					<td class="col-sm-2 control-label">总额</td>
					<td class="col-sm-1 control-label">是否支付</td>
					<td class="col-sm-1 control-label">支付方式</td>
					<td class="col-sm-2 control-label">支票号</td>
				</tr>
			</thead>
			<c:forEach items="${datas['bill']}" var="bill">
			<tbody class="abc">
				<tr>
					<td>${bill.vendor }</td>
					<td>${bill.billDate }</td>
					<td>${bill.billDueDate }</td>
					<td>${bill.sum }</td>
					<td>${bill.whetherToPay }</td>
					<td>${bill.paymentMethod }</td>
					<td>${bill.chequeNumber }</td>
				</tr>
			</tbody>
			</c:forEach>
		</table>
		
		<ul class="list-group">
			<li class="list-group-item">
				<ul class="pagination square">
					<li class="first-page" onclick="toDataPage(1)">首页</li>
					<li class="pre-page"  onclick="toDataPage(${page.currentPage-1})">上一页</li>
					<li class="next-page" onclick="toDataPage(${page.currentPage+1})">下一页</li>
					<li class="finally-page" onclick="toDataPage(${page.totalPage})">尾页</li>
				</ul>
				
			</li>
		</ul>
		</div>
	</body>
</html>